{%  extends 'king_admin/table_index.html' %}
{% load tags %}

{% block extra-css-resources %}
<style type="text/css">
    .filter-select-box{
        height: 250px!important;
        width: 100%;
        border-radius: 3px;
    }
</style>

{% endblock %}

{% block container %}

{#    change table#}
    <form class="form-horizontal" role="form" method="post" onsubmit="return SelectAllChosenData()">{% csrf_token %}
      <span style="color: red">{{ form_obj.errors }}</span>
      {% for field in form_obj %}
      <div class="form-group">
        <label  class="col-sm-2 control-label" style="font-weight: normal">
            {% if field.field.required %}
                <b>{{ field.label }}</b>
            {% else %}
                {{ field.label }}
            {% endif %}
        </label>
        <div class="col-sm-6">
{#          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">#}
            {% if field.name in admin_class.filter_horizontal %}
                <div class="col-md-5">
                    {% get_m2m_obj_list admin_class field form_obj as m2m_obj_list%}
{#                    <select multiple class="filter-select-box">#}
                    <select id="id_{{ field.name }}_from"  multiple class="filter-select-box">
{#                        {% for obj in m2m_obj_list %}#}
{#                            <option ondblclick="MoveElementTo(this,'id_{{ field.name }}_to','id_{{ field.name }}_from')"  value="{{ obj.id }}">{{ obj }}</option>#}
{#                        {% endfor %}#}
                        {% if field.name in admin_class.readonly_fields and not admin_class.is_add_form %}
                            {% for obj in m2m_obj_list %}
                                <option   value="{{ obj.id }}" disabled>{{ obj }}</option>
                            {% endfor %}
                        {% else %}
                            {% for obj in m2m_obj_list %}
                                <option ondblclick="MoveElementTo(this,'id_{{ field.name }}_to','id_{{ field.name }}_from')"  value="{{ obj.id }}">{{ obj }}</option>
                            {% endfor %}
                        {% endif %}
                    </select>
                </div>
                <div class="col-md-1">
                    添加→
                </div>
                <div class="col-md-5">
                    {% get_m2m_selected_obj_list form_obj field  as selected_obj_list %}
{#                    <select multiple class="filter-select-box">#}
                    <select tag="chosen_list" id="id_{{ field.name }}_to" name="{{ field.name }}" multiple class="filter-select-box">
{#                        {% for obj in selected_obj_list %}#}
{#                        <option value="{{ obj.id }}" ondblclick="MoveElementTo(this,'id_{{ field.name }}_from','id_{{ field.name }}_to')" >{{ obj }}</option>#}
{#                        {% endfor %}#}
                    {% if field.name in admin_class.readonly_fields  and not admin_class.is_add_form  %}
                        {% for obj in selected_obj_list %}
                            <option value="{{ obj.id }}"  disabled>{{ obj }}</option>
                        {% endfor %}
                    {% else %}
                        {% for obj in selected_obj_list %}
                            <option value="{{ obj.id }}" ondblclick="MoveElementTo(this,'id_{{ field.name }}_from','id_{{ field.name }}_to')" >{{ obj }}</option>
                        {% endfor %}
                    {% endif %}
                    </select>
{#                    {% print_obj_methods form_obj %}#}
                </div>
                <span style="color: red">{{ field.errors.as_text }}</span>
            {% else %}
                {{ field }}<span style="color: red">{{ field.errors.as_text }}</span>
            {% endif %}
        </div>
      </div>
      {% endfor %}
     {% if not admin_class.readonly_table %}
      <div class="form-group">
          {% block obj_delete %}
          <div class="col-sm-2">
                <a class="btn btn-danger" href="{% url 'obj_delete' app_name table_name form_obj.instance.id %}">Delete</a>
          </div>
          {% endblock %}
          <div class="col-sm-10 ">
            <button type="submit"  class="btn btn-success pull-right">Save</button>
          </div>
      </div>
    {% endif %}
    </form>

<script>
    function MoveElementTo(ele,target_id,new_target_id) {
        var opt_ele = "<option value='" + $(ele).val() + "' ondblclick=MoveElementTo(this,'" + new_target_id +"','"+ target_id +"')>" + $(ele).text() + "</option>";
       // $(ele).off().dblclick($(ele), parent_id)
        $("#" +target_id).append(opt_ele);
        $(ele).remove();

    }


    function SelectAllChosenData() {

        $("select[tag='chosen_list'] option").each(function () {
            $(this).prop("selected",true);
        })

        //remove all disabled attrs
        $("form").find("[disabled]").removeAttr("disabled") ;
        return true;
    }
</script>
{% endblock %}